<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org/" xmlns:p="http://www.w3.org/1999/html">
<head>
  <meta charset="UTF-8">
  <title>用户信息列表展示页</title>
  <!-- 关键代码 -->
  <script th:src="@{/webjars/jquery/3.2.1/dist/jquery.min.js}"></script>
  <script th:src="@{/webjars/bootstrap/4.3.1/js/bootstrap.min.js}"></script>
  <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}" />
  <link type="text/css" rel="stylesheet" th:href="@{/static/css/style.css}">
</head>
<body>
<table border="1" class="table table-striped text-center">
  <tr>
    <th>No.</th>
    <th>姓名</th>
    <th>密码</th>
    <th>类型</th>
    <th>生日</th>
    <th>性别</th>
    <th>年龄</th>
    <th>数据库名称</th>
    <th>操作</th>
  </tr>
  <tr th:each="user, users : ${pageInfo.list}">
    <td th:text="${user.uid}"></td>
    <!--        <td th:text="${user.uid}"></td>-->
    <td th:text="${user.username}"></td>
    <td th:text="${user.userpwd}"></td>
    <td th:text="${user.usertype}"></td>
    <td th:text="${user.usertime}"></td>
    <td th:text="${user.usersex}"></td>
    <td th:text="${user.userage}"></td>
    <td th:text="${user.dbName}"></td>
    <td>
      <span><a th:href="@{/user/toupdate/{id}(id=${user.uid})}" onclick="refresh()">修改</a></span>
      <span><a th:href="@{/user/tosave}">添加</a></span>
      <span><a th:href="@{/user/deleteById/{id}(id=${user.uid})}">删除</a></span>
    </td>
  </tr>
</table>
<div id="page‐div">
<span>
<a th:href="@{/user/showtable/1}">首页</a>
<a th:href="@{/user/showtable/{pageNum}(pageNum=${pageInfo.getPageNum() - 1})}">上一页</a>
<a th:href="@{/user/showtable/{pageNum}(pageNum=${pageInfo.getPageNum() ==pageInfo.getPages() ? pageInfo.getPages() :pageInfo.getPageNum() + 1})}">下一页</a>
<a th:href="@{/user/showtable/{pageNum}(pageNum=${pageInfo.getPages()})}">尾页</a>
</span>&nbsp;&nbsp;
  <span>
<label>当前第&nbsp;</label><em th:text="${pageInfo.getPageNum()}"></em><label>&nbsp;页,
</label>
<label>共&nbsp;</label><em th:text="${pageInfo.getPages()}"></em><label>&nbsp;页
</label>
    <label>&nbsp;&nbsp;跳转到第&nbsp;</label><input id="page-input" /><label>&nbsp;页</label>
    <a href="javascript:void(0)" th:onclick="toPage()">跳转</a>
</span>
</div>
</body>
<script th:inline="javascript">
  function toPage() {
    let pageNum = document.getElementById("page-input").value;
    if(pageNum > [[${pageInfo.getPages()}]])
      pageNum = [[${pageInfo.getPages()}]];
    /*<![CDATA[*/
    let toPageHref = /*[[@{/user/queryByPage/{curPage}(curPage=*/"" + pageNum + /*)}]]*/"";
    /*]]>*/
    location.href = toPageHref;
  }
</script>
<script>
  function refresh(){
  window.location.reload();
}
</script>
</html>
